<script setup lang="ts">
import VideoConter from './components/VideoConter/index.vue'
import Framing from './components/Framing/index.vue'
import Price from './components/Price/index.vue'
import Publisher from './components/Publisher/index.vue'
import PurchaseVideo from './components/PurchaseVideo/index.vue'
import keywordTitle from '@/components/KeywordTitle/index.vue'
import ItemVideo from '@/components/ItemVideo/index.vue'
import ChangeButton from '@/components/ChangeButton/index.vue'
import Advertising from '@/components/Advertising/index.vue'
import Give from '@/components/Give/index.vue'
import APIDetails from '@/api/details'
import type { GoodsInfoData, GoodsInfoResult, SimilarResult, SetGoodsLikesResult, SetGoodsCollectionResult, SetGoodsSharesResult } from '@/api/details/types'
import { useAuth } from '@/stores/index'
import { useHead } from '@vueuse/head'

const $route = useRoute()
const $router = useRouter()
const { token } = storeToRefs(useAuth())
const { isNextOperation } = useAuth()
const loading = shallowRef<boolean>(false)


watch($route, () => {
    getGoodsInfo()
}, { immediate: true })

const goodsInfo = ref<GoodsInfoResult>({})

const consumeLogList = ref<any[]>([])

provide('goodsInfo', goodsInfo)
provide('consumeLogList', consumeLogList)

/** 获取视频详情 */
async function getGoodsInfo() {
    const goodsInfoData: GoodsInfoData = {
        category_type: ($route.query.categoryType as string),
        id: ($route.params.id as string)
    }

    if (token.value) {
        const { data } = await APIDetails.getLoginNewGoodsInfo(goodsInfoData)
        goodsInfo.value = data.getGoodsInfo
        similarList.value = data.getSimilar
        shopOtherList.value = data.getShopOther
        consumeLogList.value = data.getConsumeLog
    } else {
        const { data } = await APIDetails.getNewGoodsInfo(goodsInfoData)
        goodsInfo.value = data.getGoodsInfo
        similarList.value = data.getSimilar
        shopOtherList.value = data.getShopOther
        consumeLogList.value = data.getConsumeLog
    }

    useHead({
        title: goodsInfo.value.title ? `${goodsInfo.value.title}——版权视频_商用视频_视频素材_视频制作模板_心安元素官网www.xinanyuansu.com` : '心安元素_正版素材_商用素材_版权交易_www.xinanyuansu.com',
        meta: [{
            name: 'keywords',
            content: goodsInfo.value.key ? `${goodsInfo.value.key},视频素材,视频版权,视频创作,视频模板,商用视频` : '商用素材,素材下载,正规素材,版权素材,素材授权,商用图片商用视频,商用字体,商用视频,商用字体,心安元素'
        }, {
            name: 'description',
            content: goodsInfo.value.brief ? `${goodsInfo.value.brief},心安元素作为专业的商业视频素材版权交易平台，欢迎您的的入驻及使用正版视频，视频版权进行视频创作，视频商用！` : '心安元素是集视频、图片、音乐、字体素材买卖的版权授权、版权交易、版权买卖、版权商用的素材版权授权平台，欢迎大家入驻心安元素，心安元素官网: www.xinanyuansu.com'
        }]
    })
}

watch(token, () => {
    getGoodsInfo()
})

const similarList = ref<SimilarResult[]>([])

function getSimilar() {
    const goodsInfoData: GoodsInfoData = {
        category_type: ($route.query.categoryType as string),
        id: ($route.params.id as string)
    }
    loading.value = true
    APIDetails.getSimilar(goodsInfoData).then(({ data }) => {
        similarList.value = data
    }).finally(() => {
        loading.value = false
    })
}

function handleOnClick(id: number) {
    $router.push({
        name: 'VideoDetails',
        params: {
            id
        },
        query: {
            categoryType: 'Video'
        }
    })
}

const shopOtherList = ref<SimilarResult[]>([])

function setLink(data: SetGoodsLikesResult) {
    goodsInfo.value.is_likes = data.is_likes
    goodsInfo.value.likes = data.likes
}

function setCollections(data: SetGoodsCollectionResult) {
    goodsInfo.value.is_collection = data.is_collection
    goodsInfo.value.collections = data.collections
}

function setShares(data: SetGoodsSharesResult) {
    goodsInfo.value.shares = data.shares
}

function setConcern(is_concern: 0 | 1) {
    goodsInfo.value.is_concern = is_concern
}

const dialogVisible = shallowRef<boolean>(false)

const dialogGiveVisible = shallowRef<boolean>(false)

function handleGiveReward() {
    if (isNextOperation()) {
        dialogGiveVisible.value = true
    }
}

function handleClickPurchase() {
    if (isNextOperation()) {
        dialogVisible.value = true
    }
}

</script>

<template>
    <div class="video-details">
        <div class="video-container">
            <div class="left">
                <VideoConter @set-link="setLink" @set-collections="setCollections" @set-shares="setShares"
                    @give-reward="handleGiveReward" />
                <Framing />
            </div>
            <div class="right">
                <Price @on-click-purchase="handleClickPurchase" />
                <Publisher @set-concern="setConcern" />
            </div>
        </div>
        <div class="video-content">
            <div class="title">
                <keywordTitle title="相似推荐" />
                <ChangeButton @click="getSimilar" />
            </div>
            <div class="content" v-loading="loading">
                <ItemVideo v-for="item in similarList" :key="item.id" @click="handleOnClick(item.id)"
                    :image="item.image" :sample="item.sample" />
            </div>
        </div>
        <div class="video-content">
            <div class="title">
                <keywordTitle title="店主其他产品" />
            </div>
            <div class="content">
                <ItemVideo v-for="item in shopOtherList" :key="item.id" @click="handleOnClick(item.id)"
                    :image="item.image" :sample="item.sample" />
            </div>
        </div>
        <div class="video-content">
            <Advertising />
        </div>
        <PurchaseVideo v-model="dialogVisible" />
        <Give v-model="dialogGiveVisible" />
    </div>
</template>

<style lang="scss" scoped>
.video-details {
    padding-top: 35px;

    .video-content {
        box-sizing: border-box;
        width: 1340px;
        padding: 0 20px;
        margin: 0 auto;

        .content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px 18px;
            margin-bottom: 20px;
        }

        .title {
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .video-container {
        box-sizing: border-box;
        width: 1340px;
        padding: 0 20px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: 0 36px;

        .left {
            width: 880px;
        }

        .right {
            width: 380px;
        }
    }
}
</style>
